<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../../third-party/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="../../third-party/jquery-1.10.2.min.js"></script>
    <script src="../../third-party/bootstrap/js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container" style="margin-top: 20px">
    <form action="">
        <div class="mb-3" style="display: none;">
            <label for="special_id1">专业</label>
            <select name="special_id1" id="special_id1" class="form-control">
                <option value="">请选择专业</option>
                <option value="1">城市建筑空间</option>
                <option value="2">暖通空调</option>
                <option value="3">建筑技艺</option>
                <option value="4">建筑结构</option>
                <option value="5">建筑经济</option>
                <option value="6">施工技术</option>
                <option value="6">给水排水</option>
                <option value="8">智能建筑电气技术</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="banner_way">广告类型</label>
            <select name="banner_way" id="banner_way" class="form-control">
                <option value="">请选择类型</option>
                <option value="1">图片广告</option>
                <option value="2">视频广告</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="banner_id">选择插入广告</label>
            <select name="banner_id" id="banner_id" class="form-control">
                <option value="">选择广告</option>
            </select>
        </div>
    </form>
</div>
<!--图片广告-->
<div id="imageHtml" style="display: none"></div>
<!--视频广告-->
<div id="videoHtml" style="display: none"></div>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="../../dialogs/internal.js"></script>
<script>
    $(function () {
        console.log(editor);
        let specialId = editor.options.specialId;
        specialId = parseInt(specialId);
        if (specialId <= 0) {
            $("#special_id1").parent('div').show();
        }

        $("#special_id1").change(function () {
           $("#banner_way").change();
        });

        $("#banner_way").change(function () {
            $("#imageHtml").html('');
            $("#videoHtml").html('');
            let _this = $(this);
            let way = _this.val();
            let specialId1 = $("#special_id1").val();
            let options = [];
            options.push("<option value=''>选择广告</option>")
            options.push("<option value='随机广告'>随机广告</option>")
            let post_data = {
                way: way
            }
            if (specialId > 0) {
                post_data.special_id = specialId;
            } else {
                post_data.special_id = specialId1;
            }
            if (way === '') return false;
            $.ajax({
                url: '/admin/banner/getBanners',
                data: post_data,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 200) {
                        let data = res.data;
                        if (data.length > 0) {
                            $.each(data, function (i, v) {
                                options.push("<option data-video-url='" + v.video_url + "' data-title='" + v.title + "' data-type='" + v.type + "' data-image='" + v.image + "' data-url='" + v.url + "' value='" + v.id + "'>" + v.title + "</option>")
                            });
                            $("#banner_id").html(options);
                        }
                    }
                }
            });

        });
        $("#banner_id").change(function () {
            let _this = $(this);
            let id = _this.val();
            let option = _this.find('option:selected');
            let way = $("#banner_way").val();
            let fway = $("#banner_way").find('option:selected').text();
            let type = option.data('type');
            let image = option.data('image');
            let url = option.data('url');
            let videoUrl = option.data('video-url');
            let title = option.data('title');
            let html = "";
            if (way == 1) {
                if (type == 1) {
                    // 无连接
                    html = '<p class="AdsInDoc"><a class="AdsInA" data-id="' + id + '" href="#" target="_blank"><img style="padding: 1px; margin: 1px; border: none; outline: 1px solid #0782C1;" src="' + image + '" border="0" width="100%"/></a></p>';
                } else if (type == 2 || type ==3) {
                    // 超链接和图文
                    html = '<p class="AdsInDoc"><a class="AdsInA" data-id="' + id + '" href="' + url + '" target="_blank"><img style="padding: 1px; margin: 1px; border: none; outline: 1px solid #0782C1;" src="' + image + '" src="' + image + '" border="0" width="100%"/></a></p>';
                } else if (id == '随机广告') {
                    html += '<div class="randomAd" adtype="' + fway + '" readonly="true" style="border:2px solid #CCC;clear:both;width:100%;text-align:center;padding:15px 0px;background:#CCCCFF">' +
                        '<h4 style="text-align:center;">{随机广告}</h4>' +
                        '<div style="text-align:center;">' + fway + '</div>' +
                        '</div > ' +
                        '';
                }
                $("#imageHtml").html(html);
                $("#videoHtml").html('');
            } else if (way == 2) {
                if (type == 1) {
                    // 无连接
                    html += '<p class="AdsInDoc" ><a class="AdsInA" data-id="' + id + '" href="' + url + '" target="_blank"><video src="' + videoUrl + '" width="100%" height="264" controls="true" autobuffer="true"></video></a></p>';
                } else if (type == 2 || type == 3) {
                    // 超链接和图文
                    // html += '<p class="AdsInDoc"><a class="AdsInA" data-id="' + id + '" href="' + url + '" target="_blank"><img width="100%" height="200" class="edui-upload-video  vjs-default-skin" autoplay="true" style="background:url('+image+') no-repeat center center; border:1px solid gray;" _url="'+videoUrl+'" src="/ueditor/themes/default/images/spacer.gif" alt=""></a></p>';
                    html += '<p class="AdsInDoc"><a class="AdsInA" data-id="' + id + '" href="' + url + '" target="_blank"><video src="' + videoUrl + '" width="100%" height="264" controls="true" autobuffer="true"></video></a></p>';
                } else if (id == '随机广告') {
                    html += '<div class="randomAd" adtype="' + fway + '" readonly="true" style="border:2px solid #CCC;clear:both;width:100%;text-align:center;padding:15px 0px;background:#CCCCFF">' +
                        '<h4 style="text-align:center;">{随机广告}</h4>' +
                        '<div style="text-align:center;">' + fway + '</div>' +
                        '</div > ' +
                        '';
                }
                $("#imageHtml").html('');
                $("#videoHtml").html(html);
            }
        });
        dialog.onok = function () {
            // 插入正文内容
            let way = $("#banner_way").val();
            if (way == 1) {
                let content = $("#imageHtml").html();
                editor.execCommand('inserthtml', content, true);
            } else if (way == 2) {
                let content = $("#videoHtml").html();
                console.log(content);
                editor.execCommand('inserthtml', content, true);
            }
        }
    })
</script>
</body>
</html>
